<template>
    <ManageStudentView class="ManageStudentView">
        <div class="card">
            <div class="card-body">
                <div class="card-list-scrollable" style="max-height: 570px;">
                    <div class="card" v-for="returnbook in return_book_list.return_book_list" :key="returnbook.id">
                        <div class="card-body">
                            <span @mouseover="to_open_user_info(returnbook.borrower_number, returnbook.borrower_classname, returnbook.borrower_collegename)" @mouseleave="to_close_user_info"><img :src="returnbook.borrower_photo" alt="" class="return_user_photo"></span>
                            <span class="return_user_name">“{{ returnbook.borrower_name }}”</span>
                            <span>申请归还</span>
                            <span class="return_book_name" @mouseover="to_open_book_info(returnbook.bookname, returnbook.bookauthor, returnbook.borrowed_publisher)" @mouseleave="to_close_book_info">《{{ returnbook.bookname }}》</span>
                            <button type="button" class="btn btn-success return_book_confirm_but" @click="to_confirm_returnbook(returnbook.id, returnbook.borrower_id, returnbook.borrowed_id, returnbook.stock, returnbook.borrowed_score, returnbook.bookname)">确认归还</button>
                            <button type="button" class="btn btn-info return_book_contart_but" @click="to_contart_user(returnbook.borrower_id)">联系用户</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open">
            <div class="mb-3">
                <div class="info_confirm">请确认用户学号</div>
                <input type="text" class="form-control" :placeholder="$store.state.user.username" disabled>
                <div class="info_confirm">请确认用户所还书籍</div>
                <input type="text" class="form-control" :placeholder="return_book_name" disabled>
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="to_confirm_confirm_returnbook">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open_user_info">
            <div class="mb-3">
                <div class="info_confirm">用户学院</div>
                <input type="text" class="form-control" :placeholder="return_borrower_collegename" disabled>
                <div class="info_confirm">用户班级</div>
                <input type="text" class="form-control" :placeholder="return_borrower_classname" disabled>
                <div class="info_confirm">用户学号</div>
                <input type="text" class="form-control" :placeholder="return_borrower_number" disabled>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open_book_info">
            <div class="mb-3">
                <div class="info_confirm">书籍名称</div>
                <input type="text" class="form-control" :placeholder="return_borrowed_bookname" disabled>
                <div class="info_confirm">书籍作者</div>
                <input type="text" class="form-control" :placeholder="return_borrowed_author" disabled>
                <div class="info_confirm">书籍出版社</div>
                <input type="text" class="form-control" :placeholder="return_borrowed_publisher" disabled>
            </div>
        </div>
    </ManageStudentView>
</template>

<script>
import ManageStudentView from '@/components/ManageStudentView.vue';
import $ from 'jquery';
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "ConfirmReturnBookView",
    components: {
        ManageStudentView
    },
    setup() {
        const store = useStore();
        const return_book_list = reactive({});
        const is_open = ref(false);
        const is_open_user_info = ref(false);
        const is_open_book_info = ref(false);
        const returnbook_id = ref('');
        const return_borrower_id = ref('');
        const return_borrowed_id = ref('');
        const return_borrowed_stock = ref('');
        const return_book_score = ref('');
        const return_book_name = ref('');
        const return_borrower_number = ref('');
        const return_borrower_classname = ref('');
        const return_borrower_collegename = ref('');
        const return_borrowed_bookname = ref('');
        const return_borrowed_author = ref('');
        const return_borrowed_publisher = ref('');
        const router = useRouter();
        $.ajax({
            url: "http://47.121.28.202:8000/settings/returnbook/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                return_book_list.return_book_list = resp;
                return_book_list.count = resp.length;
            }
        })
        
        const close = () => {
            is_open.value = false;
        }

        const to_contart_user = (userid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'ordinarydialogue',
                    params: {
                        userid,
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const to_confirm_returnbook = (returnbookid, borrowerid, borrowedid, stock, score, bookname) => {
            is_open.value = true;
            returnbook_id.value = returnbookid;
            return_borrower_id.value = borrowerid;
            return_borrowed_id.value = borrowedid;
            return_borrowed_stock.value = stock;
            return_book_score.value = score;
            return_book_name.value = bookname;
        }

        const to_confirm_confirm_returnbook = () => {
            $.ajax({
                url: "http://47.121.28.202:8000/settings/returnbook/",
                type: "DELETE",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    id: parseInt(returnbook_id.value),
                },
                success() {
                    $.ajax({
                        url: "http://47.121.28.202:8000/settings/borrowedbooks/",
                        type: "DELETE",
                        headers: {
                            'Authorization': "Bearer " + store.state.user.access,
                        },
                        data: {
                            book_id: parseInt(return_borrowed_id.value),
                            user_id: parseInt(return_borrower_id.value),
                        },
                        success() {
                            $.ajax({
                                url: "http://47.121.28.202:8000/settings/getbooks/",
                                type: "PATCH",
                                data: {
                                    book_id: parseInt(return_borrowed_id.value),
                                    stock: parseInt(return_borrowed_stock.value) + 1,
                                    score: parseInt(return_book_score.value) + 5,
                                },
                                success() {
                                    is_open.value = false;
                                    return_book_list.return_book_list = return_book_list.return_book_list.filter(returnbook => returnbook.id !== parseInt(returnbook_id.value));
                                }
                            })
                        }
                    })
                }
            })
        }

        const to_open_user_info = (number, classname, collegename) => {
            is_open_user_info.value = true;
            return_borrower_number.value = number;
            return_borrower_classname.value = classname;
            return_borrower_collegename.value = collegename;
        }

        const to_close_user_info = () => {
            is_open_user_info.value = false;
        }

        const to_open_book_info = (bookname, bookauthor, borrowed_publisher) => {
            is_open_book_info.value = true;
            return_borrowed_bookname.value = bookname;
            return_borrowed_author.value = bookauthor;
            return_borrowed_publisher.value = borrowed_publisher;
        }

        const to_close_book_info = () => {
            is_open_book_info.value = false;
        }

        return {
            close,
            is_open,
            return_book_list,
            is_open_user_info,
            is_open_book_info,
            to_contart_user,
            to_confirm_returnbook,
            to_confirm_confirm_returnbook,
            return_book_name,
            to_open_user_info,
            to_close_user_info,
            to_open_book_info,
            to_close_book_info,
            return_borrower_number,
            return_borrower_classname,
            return_borrower_collegename,
            return_borrowed_bookname,
            return_borrowed_author,
            return_borrowed_publisher,
        }
    }
}
</script>

<style scoped>
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 250px;  
    width: 400px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
}
.return_user_photo {
    width: 40px;
    margin-right: 10px;
    cursor: pointer;
}
.return_book_name {
    font-weight: bold;
    font-size: larger;
    cursor: pointer;
}
.return_user_name {
    font-weight: bold;
}
.return_book_confirm_but {
    margin-left: 10px;
    float: right;
}
.return_book_contart_but {
    /* margin-: 10px; */
    float: right;
}
.btn-tanchuang {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
}
.ManageStudentView {
    user-select: none;
}
</style>